<header class="itmp-header">

	<div class="header-container flex flex-row flex-items-center common-header-bgc">
		<div class="router-name">
			<!-- {{routerName}} -->
		</div>
		<div class="search-box">
			<!-- <nz-input-group [nzSuffix]="suffixIconSearch">
						<input type="text" nz-input placeholder="" class="font-14-rem" />
					</nz-input-group>
					<ng-template #suffixIconSearch>
						<i nz-icon type="search" class="font-20-rem"></i>
					</ng-template> -->
		</div>
		<div class="time-box text-ellipsis common-header-font-color">
			{{systemService.time}}
		</div>
		<div class="tools-box flex flex-row flex-items-center">
			<!-- <i nz-tooltip nzTitle="warning" nzPlacement="bottom" class="iconfont icon-lingdang font-20-rem cur-p"
				style="position: relative;" (click)="showMsgBox = !showMsgBox">
				<itmp-sys-msg-box class="system-msg-box" [messages]="systemMessage" *ngIf="showMsgBox" [@fadeIn]
					[@fadeOut]></itmp-sys-msg-box>
			</i> -->
			<i nz-tooltip nzTitle="{{'header.alert'|translate}}" nzPlacement="bottom" (click)="goToTrafficAlert()"
				class="iconfont icon-lingdang font-16-rem cur-p" style="color: white">
				<span class="msg-hint-icon" *ngIf="alert_total">
					{{alert_total}}
				</span>
			</i>
			<!-- <i nz-tooltip nzTitle="radar" nzPlacement="bottom" class="iconfont icon-xinhaoche1 font-20-rem cur-p"></i> -->
			<i nz-tooltip nzTitle="{{'header.incident'|translate}}" nzPlacement="bottom" (click)="goToIncidentRecord()"
				class="iconfont icon-guzhangguzhangguanli font-16-rem cur-p" style="color: white">
				<div class="msg-hint-icon" *ngIf="ir_total">
					{{ir_total}}
				</div>
			</i>

			<i nz-tooltip nzTitle="{{'header.alarm'|translate}}" nzPlacement="bottom" style="color: white"
				(click)="goToEquipmentAlarmList()" class="iconfont icon-jinggao1 font-16-rem cur-p">
				<div class="msg-hint-icon" *ngIf="alarm_total">
					{{alarm_total}}
				</div>
			</i>
			<i nz-tooltip nzTitle="{{'header.map'|translate}}" nzPlacement="bottom" style="color: white"
				class="iconfont icon-diqiu1 font-16-rem cur-p" (click)="openGIS()" *ngIf="!openGisLoading && gisAccess"></i>
			<ng-template #indicatorTemplate><i nz-icon type="loading" style="font-size: 0.2rem;"></i> </ng-template>
			<nz-spin nzSimple [nzIndicator]="indicatorTemplate" *ngIf="openGisLoading && gisAccess"> </nz-spin>
		</div>

		<div style="margin-right:0.3rem">
			<!-- <button nz-button nz-dropdown class="zone-label">select Zone</button>  -->
			<div style="background:#e6e6e6;border-radius: 10px;">
				<nz-dropdown nzPlacement="bottomCenter" [nzClickHide]="false" >
					<button nz-button nz-dropdown class="zone-label"  style="width: 110px;">
						{{'header.Select Zone' | translate}}
					</button>
					<!-- <div nz-menu>
						<nz-tree nz-menu nzSelectable
						#nzTree
						[nzData]="zoneAssignment"
						nzCheckable
						nzMultiple
						[nzCheckedKeys]="defaultCheckedKeys"
						[nzExpandedKeys]="defaultExpandedKeys"
						[nzSelectedKeys]="defaultSelectedKeys"
						(nzClick)="nzEvent($event)"
						(nzExpandChange)="nzEvent($event)"
						(nzCheckBoxChange)="nzEvent($event)"
						></nz-tree>
					</div> -->
					<nz-spin [nzSpinning]="isLoading">
						<ul nz-menu class="capital-letters">
							<li nz-menu-item class="capital-letters-item">
								<label nz-checkbox [nzDisabled]="selectAllDisabled" [(ngModel)]="zoneSelectedAll"
									[nzIndeterminate]="zoneIndeterminate" (ngModelChange)="selectAllZone($event)">All</label>
							</li>
							<li nz-menu-item *ngFor="let zone of zoneAssignment" class="capital-letters-item">
								<label  nz-checkbox [(ngModel)]="zone.checked" [nzDisabled]="zone.disabled"
									(ngModelChange)="zoneCheckedStatusSync(zone)">{{zone.name}}</label>
							</li>
						</ul>
					</nz-spin>
				</nz-dropdown>
			</div>
		</div>

		<div class="lang-box" style="margin-right:0.3rem;">
			<nz-dropdown [nzPlacement]="'bottomLeft'">
				<button nz-button nz-dropdown class="lang-label" style="width: 110px;">{{systemService.langLabel}}</button>
				<ul nz-menu  class="capital-letters">
					<li nz-menu-item class="capital-letters-item" *ngFor="let lang of systemService.langs"
						(click)="systemService.changeLang(lang.value)">{{lang.label}}</li>
				</ul>
			</nz-dropdown>
		</div>


		<div class="userinfo-box flex flex-row flex-items-center user-select">
			<div class="user-head">
				<i class="iconfont icon-user user-head-no-login"></i>
			</div>
			<div class="user-info flex flex-column" style="margin-right:0.1rem">
				<div class="user-name text-ellipsis">{{userName}}</div>
				<div class="user-role text-ellipsis">{{roleName}}</div>
			</div>
			<nz-dropdown nzPlacement="bottomCenter">
				<a nz-dropdown><i class="iconfont icon-down user-head-down"></i> </a>
				<ul nz-menu nzSelectable class="capital-letters">
					<li nz-menu-item class="capital-letters-item">
						<a (click)="isChangePwVisible = !isChangePwVisible">{{'header.Change password' | 
							translate}}</a>
					</li>
					<li nz-menu-item class="capital-letters-item">
						<a (click)="ls.logOut()">{{'header.Logout' |
							translate}}</a>
					</li>
				</ul>
			</nz-dropdown>
		</div>
		
		<div class="other-box" style="margin-left: 20px">
			<!-- <button nz-button nzSize="small" nzType="primary" (click)="ls.logOut()">Logout</button> -->
			<img src="/content/images/logo.png" alt="logo">
		</div>
	</div>
</header>
<itmp-change-password-box [isChangePwVisible]="isChangePwVisible" (getCrrunKmChange)="handleChangePwCancel($event)">
</itmp-change-password-box>